<template>
  <div>
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <span class="close" @click="$emit('close')">&times;</span>
        <div class="title">{{title}}列表</div>
        <!-- {{list}} -->
        <div class="list">
          <div class="list-item" v-for="(item,i) in list" :key=i>
          <!-- <div class="list-item"> -->
            <avatar v-if="item.avatar===null" size="40" shape="square"></avatar>
            <avatar v-else size="40" shape="square" :url="item.avatar"></avatar>
            <div class="username">{{item.username}}</div>
              <!-- 状态一 -->
              <div class="statebutton" v-if="this.profile.friends.indexOf(item.id)!==-1" @click="deletefollow(item.id)">
                <i class="iconfont">&#xe608;</i>互相关注
              </div>
              <!-- 状态二 -->
              <div class="statebutton" v-else-if="this.profile.fans.indexOf(item.id)!==-1" @click="addfollow(item.id)">
                <i class="iconfont">&#xe613;</i>回关
              </div>
              <!-- 状态三 -->
              <div class="statebutton" v-else-if="this.profile.follow.indexOf(item.id)!==-1" @click="deletefollow(item.id)">
                <i class="iconfont">&#xe614;</i>已关注
              </div>
              <!-- 状态四 -->
              <div class="statebutton" v-else @click="addfollow(item.id)">
                <i class="iconfont">&#xe613;</i>关注
              </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/store'
// 调用请求用户基本信息的用户接口 调用添加关注接口 调用获取本人基本信息从而更新vuex 取消关注接口
import { addFollow, deleteFollow, getuserlist, getUserInfo } from '@/api/user'
// 调用头像组件
import avatar from '@/components/library/avatar.vue'
// 调用消息提示组件
import popmessage from '@/components/library/message'
export default {
  name: 'userlistDialog',
  components: {
    avatar
  },
  props: {
    showModal: Boolean,
    // 通关传来的id数组渲染列表
    indexlist: {
      type: Array,
      default: () => []
    },
    // 标题 指渲染的是什么列表
    title: String
  },
  data: function () {
    return {
      list: [],
      type: 4,
      profile: ''
    }
  },
  methods: {
    // 添加用户关注
    addfollow (id) {
      addFollow({ targetid: id }).then((res) => {
        if (res.data.status === 0) {
          popmessage({ type: 'success', str: res.data.message })
          // 刷新vuex内数据的状态 以及这个用户卡的状态
          getUserInfo().then(res => {
            // console.log(res)
            this.profile = res.data
            this.profile.follow = JSON.parse(this.profile.follow)
            this.profile.fans = JSON.parse(this.profile.fans)
            this.profile.friends = JSON.parse(this.profile.friends)
            const { follow, fans, friends } = res.data
            store.commit('user/updatestate', { follow, fans, friends })
            this.refreshState()
          })
        } else {
          popmessage({ type: 'warn', str: res.data.message })
        }
      })
    },
    // 取消用户关注
    deletefollow (id) {
      deleteFollow({ targetid: id }).then((res) => {
        if (res.data.status === 0) {
          popmessage({ type: 'success', str: res.data.message })
          // 刷新vuex内数据的状态 以及这个用户卡的数据
          getUserInfo().then(res => {
            // console.log(res)
            this.profile = res.data
            this.profile.follow = JSON.parse(this.profile.follow)
            this.profile.fans = JSON.parse(this.profile.fans)
            this.profile.friends = JSON.parse(this.profile.friends)
            const { follow, fans, friends } = res.data
            store.commit('user/updatestate', { follow, fans, friends })
            this.refreshState()
          })
        } else {
          popmessage({ type: 'warn', str: res.data.message })
        }
      })
    }
  },
  watch: {
    indexlist (newval, oldval) {
      // console.log(this.indexlist)
      getuserlist({ list: JSON.stringify(newval) }).then((res) => {
        this.list = res.data.listmsg
        // console.log(this.list)
      })
    }
  },
  created () {
    this.profile = store.state.user.profile
  }
}
</script>

<style scoped lang="less">
.modal {
  display: block;
  position: fixed;
  z-index: 1;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 600px;
  .title{
    text-indent: 30px;
    line-height: 50px;
    height: 50px;
    font-size: 30px;
    color: #666;
    font-family: '钉钉进步体';
  }
  .list{
    margin: 0 auto;
    height: 500px;
    width: 500px;
    padding: 10px;
    overflow: auto;
    .list-item{
      border-radius: 10px;
      background-color: #e0e0e0;
      width: 400px;
      display: flex;
      padding: 10px;
      height: 60px;
      margin-top: 20px;
      .username{
        margin-left: 20px;
        width: 100px;
        height: 40px;
        line-height: 40px;
        font-family: '钉钉进步体';
        font-size: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .statebutton{
        margin-top: 5px;
        cursor: pointer;
        margin-left: 140px;
        background-color: #d6d6d6;
        width: 100px;
        height: 30px;
        font-size: 16px;
        line-height: 30px;
        border-radius: 20px;
        text-align: center;
        &:hover{
          background-color: #cecece;
        }
      }
    }
  }
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: rgb(255, 47, 47);
  text-decoration: none;
  cursor: pointer;
}
</style>
